import { Component } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import { initModelValue, renderForm, type FormModalDto } from '@/components/modal/Modal'
import { getKeyToEnum, ProductTypeCnEnum } from '@/const/enum'

@Component
export class BasicRule extends Render {

    basicFormConfig = this.initBasicFormConfig() as FormModalDto
    initBasicFormConfig() {
        return {
            title: '',
            width: '400px',
            theme: 'light',
            show: false,
            items: {
                ruleName: {
                    name: '规则名称',
                    element: 'input',
                    required: true,
                },
                productId: {
                    name: '保险产品',
                    element: 'radioGroup',
                    options: getKeyToEnum(ProductTypeCnEnum, false, ['长期保']),
                    required: true,
                },
            },
            complete: async () => {},
            cancel: () => {
                this.basicFormConfig.show = false
            },
            init: () => {
                initModelValue(this.basicFormConfig)
            }
        } as FormModalDto
    }

    basicForm = {
        validate: async () => {},
        clear: () => {},
        element: () => <> </>
    }

    onMounted() {
        this.basicForm = renderForm(this.basicFormConfig)
    }

    render() {
        return <>
            {
                this.basicForm.element()
            }
        </> 
    }

}

export default toNative<{}, {}>(BasicRule)